<template>
  <div>
    <div>
      <div class="logo-img">
        <img src="../../public/log.png" alt="游戏人生">
      </div>
      <span v-if="!baseData.collapsed" class="logo-name">游戏人生</span>
    </div>
    <a-menu mode="inline" v-model="menuItem" class="layout-menu">
      <template v-for="r in router">
        <a-menu-item v-if="!r.children" :key="r.id" @click="handleMenuClick(r)">
            <router-link :to="r.path">
              <a-icon type="user" />
              <span>{{r.meta.title}}</span>
            </router-link>
        </a-menu-item>
        <a-sub-menu v-else :key="r.id">
          <span slot="title"><a-icon :type="r.meta.icon" /><span>{{r.meta.title}}</span></span>
          <a-menu-item v-for="c in r.children" :key="c.id" @click="handleMenuClick(c)">
            <router-link :to="c.path">
              <a-icon :type="c.meta.icon" />
              <span>{{c.meta.title}}</span>
            </router-link>
          </a-menu-item>
        </a-sub-menu>
      </template>
    </a-menu>
  </div>
</template>

<script>
// 导入路由
const router = require('../../mock/router.json')
export default {
  name: 'BaseMenu',
  props: ["baseData"],
  data() {
    return {
      router,
      menuItem: '',
    };
  },
  watch: {
    'baseData.activeKey'(newVal) {
      const panes = this.baseData.panes.filter(pane => pane.id == newVal);
      if (panes.length == 1) {
        let item = panes[0]
        this.$router.push({ path:item.path })
      }
    },
  },
  methods: {
    handleMenuClick(item) {
      this.baseData.activeKey = item.id;
      const panes = this.baseData.panes.filter(pane => pane.id == item.id);
      if (panes.length == 0) {
        this.baseData.panes.push(item)
      }
    },
  },
}
</script>

<style lang="less" scoped>
  .logo-img {
    height: 50px;
    width: 50px;
    padding: 15px;
    display: inline-block;
  }
  .logo-img img {
    height: 20px;
    width: 20px;
  }
  .logo-name {
    display: inline-block;
    vertical-align: middle;
    font-size: 15px;
    color: #fff;
  }
  .layout-menu {
    overflow: auto;
    height: calc(~'100vh - 50px');
    
      &::-webkit-scrollbar {
          width: 0;
          height: 0;
      }
  }
</style>
